<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="教师状态">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
          <el-option label="正常" value="normal" />
          <el-option label="禁用" value="disabled" />
        </el-select>
      </el-form-item>
      <el-form-item label="教师名称">
        <el-input
            v-model="queryParams.name"
            placeholder="请输入教师名称"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="教师手机号">
        <el-input
            v-model="queryParams.phone"
            placeholder="请输入教师手机号"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="showAddDialog">新增教师</el-button>
      </el-form-item>
    </el-form>

    <!-- 教师列表 -->
    <el-table v-loading="loading" :data="teacherList" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column label="教师名称" prop="name" />
      <el-table-column label="教师手机号" prop="phone" />
      <el-table-column label="岗位" prop="position" />
      <el-table-column label="教师介绍" prop="introduction" />
      <el-table-column label="负责课程数量" prop="courseCount" />
      <el-table-column label="出题数量" prop="questionCount" />
      <el-table-column label="注册时间" prop="registerTime" width="180">
        <template #default="{ row }">
          <span>{{ parseTime(row.registerTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" width="80">
        <template #default="{ row }">
          <span>{{ row.status === 'normal' ? '正常' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleEnable(row)">{{ row.status === 'normal' ? '禁用' : '启用' }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-key" @click="handleResetPassword(row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        v-show="total>0"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 编辑教师信息弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%">
      <el-form :model="teacherInfo" label-width="80px">
        <el-form-item label="教师名称">
          <el-input v-model="teacherInfo.name" placeholder="请输入教师名称" />
        </el-form-item>
        <el-form-item label="教师手机">
          <el-input v-model="teacherInfo.phone" placeholder="请输入教师手机号" />
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="teacherInfo.position" placeholder="请输入岗位" />
        </el-form-item>
        <el-form-item label="教师介绍">
          <el-input
              type="textarea"
              v-model="teacherInfo.introduction"
              placeholder="请输入教师介绍"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTeacherInfo">保存</el-button>
      </template>
    </el-dialog>

    <!-- 确认禁用弹窗 -->
    <el-dialog
        title="确认禁用"
        v-model="disableDialogVisible"
        width="30%"
    >
      <p>此操作将禁用<strong>{{ currentTeacherName }}</strong>，是否继续?</p>
      <template #footer>
        <el-button @click="disableDialogVisible = false">再想想</el-button>
        <el-button type="primary" @click="handleDisableTeacher">确认禁用</el-button>
      </template>
    </el-dialog>

    <!-- 重置密码弹窗 -->
    <el-dialog
        title="重置密码"
        v-model="resetPasswordDialogVisible"
        width="30%"
    >
      <p>请确认，是否重置<strong>{{ currentTeacherName }}</strong>的密码?</p>
      <p>重置后，初始密码为<strong>123456</strong>，请通知教师尽快修改密码</p>
      <template #footer>
        <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleResetTeacherPassword">重置</el-button>
      </template>
    </el-dialog>

    <!-- 新增教师弹窗 -->
    <el-dialog title="新增教师账号" v-model="addDialogVisible" width="30%">
      <el-form :model="newTeacherInfo" label-width="80px">
        <el-form-item label="教师名称">
          <el-input v-model="newTeacherInfo.name" placeholder="请输入教师名称" />
        </el-form-item>
        <el-form-item label="教师手机">
          <el-input v-model="newTeacherInfo.phone" placeholder="请输入教师手机号" />
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="newTeacherInfo.position" placeholder="请输入岗位" />
        </el-form-item>
        <el-form-item label="教师介绍">
          <el-input
              type="textarea"
              v-model="newTeacherInfo.introduction"
              placeholder="请输入教师介绍"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveNewTeacherInfo">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {parseTime} from '@/utils/ruoyi.js'

const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const teacherList = ref([]);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  name: undefined,
  phone: undefined,
  status: undefined
});
const dialogTitle = ref("编辑教师信息");
const dialogVisible = ref(false);
const disableDialogVisible = ref(false);
const resetPasswordDialogVisible = ref(false);
const addDialogVisible = ref(false);
const teacherInfo = reactive({
  name: '',
  phone: '',
  position: '',
  introduction: '',
  courseCount: 0,
  questionCount: 0,
  registerTime: '',
  status: 'normal'
});
const newTeacherInfo = reactive({
  name: '',
  phone: '',
  position: '',
  introduction: ''
});
const currentTeacherName = ref('');

onMounted(() => {
  getList();
});

function getList() {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    teacherList.value = [
      { id: 1, name: "传老师", phone: "12800000020", position: "java老师", introduction: "资深java老师", courseCount: 0, questionCount: 0, registerTime: "2023-06-06T16:02:58", status: "normal" },
      { id: 2, name: "传老师", phone: "12800000019", position: "java老师", introduction: "资深java老师", courseCount: 0, questionCount: 0, registerTime: "2023-06-06T16:02:58", status: "normal" },
// 更多模拟数据...
    ];
    total.value = teacherList.value.length;
  }, 1000);
}

function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}

function resetQuery() {
  queryParams.name = undefined;
  queryParams.phone = undefined;
  queryParams.status = undefined;
  handleQuery();
}

function handleUpdate(row) {
  teacherInfo.name = row.name;
  teacherInfo.phone = row.phone;
  teacherInfo.position = row.position;
  teacherInfo.introduction = row.introduction;
  dialogTitle.value = '编辑教师信息';
  dialogVisible.value = true;
}

function handleEnable(row) {
  currentTeacherName.value = row.name;
  disableDialogVisible.value = true;
}

function handleResetPassword(row) {
  currentTeacherName.value = row.name;
  resetPasswordDialogVisible.value = true;
}

function handleDisableTeacher() {
  console.log('禁用教师', currentTeacherName.value);
  disableDialogVisible.value = false; // 关闭弹窗
}

function handleResetTeacherPassword() {
  console.log('重置教师密码', currentTeacherName.value);
  resetPasswordDialogVisible.value = false; // 关闭弹窗
}

function saveTeacherInfo() {
  console.log('保存教师信息', teacherInfo);
  dialogVisible.value = false; // 关闭弹窗
}

function saveNewTeacherInfo() {
  console.log('保存新增教师信息', newTeacherInfo);
  addDialogVisible.value = false; // 关闭弹窗
}

function handleSizeChange(newSize) {
  queryParams.pageSize = newSize;
  handleQuery();
}

function handleCurrentChange(newPage) {
  queryParams.pageNum = newPage;
  handleQuery();
}
</script>

<style scoped> .app-container { padding: 20px; } .dialog-footer { text-align: right; } </style>